<template>
    <view :class="$style.page">
        <PageHeader>
            <view class="PAGE_TITLE">消息</view>
        </PageHeader>
        <view class="p-l-r">
            <view :class="$style.items" v-if="dataRows.length > 0">
                <view :class="$style.item" v-for="(item, index) in dataRows" :key="index" @click="navTo(index)">
                    <image :class="$style.icon" src="@/pics/2.png" />
                    <view :class="$style.body">
                        <view :class="$style.title">{{ item.name }}</view>
                        <view :class="$style.desc">{{ item.msgList[0].msgTitle }}</view>
                    </view>
                    <view>
                        <view :class="$style.date">{{ item.msgList[0].msgSendDate }}</view>
                        <view :class="$style.count"><uni-badge size="small" :max-num="99" :text="item.msgList.length"></uni-badge></view>
                    </view>
                </view>
            </view>
            <template v-else>
                <template v-if="!loading">
                    <nut-empty description="暂无未读消息"></nut-empty>
                </template>
            </template>
        </view>

        <TabBar />
    </view>
</template>

<script lang="ts" setup>
import PageHeader from '@/components/PageHeader.vue'
    import TabBar from '@/TabBar/index.vue'
    import { messageListApi } from '@/api/Message';
    import { ref } from 'vue';

    const loading = ref(true)
    const dataRows = ref<any[]>([])

    uni.showLoading()
    messageListApi().then(r => {
        
        if(r.data) {
            // r.data.forEach(row => {
            //     row.ids = row.ids.join(",")
            // })

            dataRows.value = r.data
        }
        uni.hideLoading()
        loading.value = false
    })

    function navTo(index:number) {
        const row = dataRows.value[index]

        const appName = row.name
        let appId = row.appId
        if(!appId) {
            appId = row.msgList[0].appId
        }

        uni.navigateTo({
            url : `./detail/index?appId=${appId}&appName=${appName}`
        })


    }
</script>

<style lang="scss" module>
    .page{
        height: 100vh;
        position: relative;
        padding-bottom: $tab-bar-height;
        background: #fff;
    }

    .items{
        .item{
            height: 164rpx;
            display: flex;
            align-items: center;
            border-bottom: 1rpx solid #E7E7E7;

            .icon{
                width: 84rpx;
                height: 84rpx;
                display: block;
            }

            .body{
                flex: 1;
                min-width: 0;
                margin: 0 30rpx;
                .title{
                    line-height: 48rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                    color: rgba(0, 0, 0, 0.9);
                }

                .desc{
                    margin-top: 10rpx;
                    line-height: 44rpx;
                    font-size: 28rpx;
                    color: rgba(0, 0, 0, 0.6);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

            }

            .date{
                line-height: 48rpx;
                font-size: 24rpx;
                color: rgba(0, 0, 0, 0.6);
            }

            .count{
                height: 44rpx;
                display: flex;
                align-items: center;
                justify-content: right;
                margin-top: 10rpx;
            }
        }
    }
</style>